<template>
  <div class="hoter">
    <div class="container">
      <div class="left">
        <div class="head">
          <img
            src="../src/assets/heade.png"
            alt=""
            style="width: 3rem"
            @click="showhead"
          />
        </div>

        <div class="name">
          <div class="nam">{{ homename }}</div>
          <div class="icon">
            <div class="money">
              金钱：
              <van-icon name="balance-o" color="gold" size="1.5rem" />
            </div>
            <div class="money">
              私信:
              <van-icon
                name="envelop-o"
                :badge="message"
                size="1.5rem"
                @click="gotomessage"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <van-circle
          v-model:current-rate="currentRate"
          :rate="rate"
          :color="gradientColor"
          text="今日完成度"
          :stroke-width="80"
          size="5.5rem"
        />
      </div>
    </div>

    <div class="shouchnag">
      <div>
        <div class="numer">9</div>
        <div>动态</div>
      </div>
      <div>
        <div class="numer">26</div>
        <div>跟帖</div>
      </div>
      <div>
        <div class="numer">15</div>
        <div>收藏/推荐</div>
      </div>
      <div>
        <div class="numer">99</div>
        <div>历史</div>
      </div>
    </div>

    <img src="../src/assets/accept.png" alt="" class="imagez" />

    <div class="guanzhu">
      <div>
        <i class="iconfont icon-guanzhu" style="color: #0094ff"></i>
        <div class="my" @click="follow">我的关注</div>
      </div>
      <div @click="cricle">
        <i class="iconfont icon-quanziguanli" style="color: green"></i>
        <div class="my">我的圈子</div>
      </div>
      <div>
        <i class="iconfont icon-renwu" style="color: orange"></i>
        <div class="my">任务中心</div>
      </div>
      <div>
        <i class="iconfont icon-shangcheng" style="color: red"></i>
        <div class="my">金币商城</div>
      </div>
    </div>

    <!-- 签到界面的实现---------------------------------------- -->
    <div class="whatday">
      <div>连续签到{{ day }}天</div>
      <div>
        <van-button type="danger" round size="small" @click="select"
          >点击签到</van-button
        >
      </div>
    </div>
    <div class="qiandao">
      <div v-for="item of list" :key="item.id" class="ga">
        <div class="baohan">
          <div>{{ item.day }}</div>
          <van-icon
            :name="item.img"
            color="gray"
            size="1.3rem"
            style="margin: 4px; border-radius: 50%"
            class="peiqi"
          />
          <div>{{ item.title }}</div>
        </div>
      </div>
    </div>
    <!-- --------------------------退出登录-------------------------------------------
<van-button type="danger" range>危险按钮</van-button> -->

    <div>
      <van-cell
        title="轻松一下"
        value=" "
        is-link
        style="text-align: left"
        @click="happygame"
      />
      <van-cell
        title="联系我吧"
        value=" "
        is-link
        style="text-align: left"
        @click="payforme"
      />
      <van-cell
        title="友情链接"
        value=" "
        is-link
        style="text-align: left"
        @click="jumpfriendlink"
      />
      <van-cell
        title="护眼模式"
        is-link
        @click="changedark"
        style="text-align: left"
      >
        <!-- <template #right-icon>
                    <van-switch v-model="checked" size="24px" />
                </template> -->
      </van-cell>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </div>

    <!-- ------------------------真退出登录---------------------------- -->
    <div>
      <van-button type="danger" size="large" class="big" @click="relogin"
        >退出登录</van-button
      >
    </div>
  </div>
</template>


<script setup>
import { onMounted, ref, reactive } from "vue";
// import { getlogin } from '../api/getlogin'
import { getday, getcommentinfo } from "../api/getlogin";
import { showConfirmDialog, showToast, showSuccessToast } from "vant";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { showImagePreview } from "vant";
import { getstorage } from "../utils/local";
const store = useStore();
const homename = ref("有态度的网友");
// const password = ref('');
const list = reactive([]);
const rate = ref(40);
const day = ref(0);
const bgc = ref(Boolean(false));
const router = useRouter();
var i = 0;
const currentRate = ref(20);
const gradientColor = {
  "0%": "#3fecff",
  "100%": "#6149f6",
};
const gotomessage = () => {
  router.push({ path: "/recommen" });
};
//展示头像
const showhead = () => {
  showImagePreview(["http://localhost:8080/img/heade.5b1af6a6.png"]);
};
const jumpfriendlink = () => {
  router.push({ path: "/friendlink" });
};
const happygame = () => {
  router.push({ path: "/happygame" });
};
const payforme = () => {
  router.push({ path: "/concatme" });
};
let total = 0;
const select = () => {
  total += 1;
  const now = new Date();
  const endOfDay = new Date(
    now.getFullYear(),
    now.getMonth(),
    now.getDate() + 1,
    0,
    0,
    0
  ); // 下一天的午夜12点
  if (now >= endOfDay) {
    // 在晚上12点之后执行的任务
    console.log("执行了");

    var bac = document.querySelector(
      `.qiandao .ga:nth-child(${day.value + 1}) `
    );
    var peiqi = document.querySelectorAll(".peiqi");
    bac.style.backgroundColor = "#ffebe2";
    peiqi[i].style.filter = "grayscale(0)";
    i++;
    day.value += 1;
  } else {
    if (total <= 1) {
      showSuccessToast("签到成功！");
      var bac = document.querySelector(
        `.qiandao .ga:nth-child(${day.value + 1}) `
      );
      var peiqi = document.querySelectorAll(".peiqi");
      bac.style.backgroundColor = "#ffebe2";
      peiqi[i].style.filter = "grayscale(0)";
      i++;
      day.value += 1;
    }
    if (total > 1) {
      showToast("今天已经签到过了！");
      return;
    }

    // if (day.value > 7) {
    //     day.value = 0
    //     i = 0
    // }
  }
};
const relogin = () => {
  showConfirmDialog({
    title: "提示",
    message: "你确定要退出吗？",
  })
    .then(() => {
      localStorage.removeItem("userinfo");
      router.push({
        path: "/home",
      });
      // on confirm
    })
    .catch(() => {});
};

const changedark = () => {
  router.push({
    path: "/dark",
  });
};

//夜间模式@@@@@@@@@@@@@@@@@@@@
const selfdark = () => {
  bgc.value = Boolean(store.state.dark);
  i;
};

//进入朋友圈·
const cricle = () => {
  router.push({
    path: "/cricle",
  });
};
const background = () => {
  selfdark();
  var back = document.querySelector("html");
  if (bgc.value == true) {
    back.style.filter = "grayscale(10)";
  }
  if (bgc.value == false) {
    back.style.filter = "grayscale(0)";
  }
};

//进入关注页面
const follow = () => {
  router.push({
    path: "/follow",
  });
};
const message = ref(0);
const getcommentinfos = async () => {
  const { data: res } = await getcommentinfo();
  message.value = res.length;
};
onMounted(async () => {
  homename.value = getstorage("userinfo");
  getcommentinfos();
  const { data: res } = await getday();
  res.forEach((element) => {
    list.push(element);
  });
  background();
});
</script>
 


<style  scoped>
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 25px;
}

.left {
  display: flex;
  justify-content: center;
  align-items: center;
}

.head img {
  /* width: 4rem;
    height: 4rem; */
  border-radius: 50%;
  border: 1px solid #0094ff;
}

.nam {
  font-size: 1.3rem;
  margin-left: 5px;
  font-weight: 500;
}

.money {
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon {
  display: flex;
  margin-left: 11px;
}

.imagez {
  width: 85vw;
  margin-top: 1rem;
}

.shouchnag {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

.shouchnag div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 1.3rem;
}

.numer {
  color: #0094ff;
}

.guanzhu {
  display: flex;
  margin-top: 2rem;
}

.guanzhu div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.guanzhu div i {
  font-size: 2rem;
}

.my {
  font-size: 1rem;
  margin-top: 0.5rem;
}

.qiandao {
  display: flex;
  /* flex-direction: column; */
}

.ga {
  flex: 1;
  display: flex;
  width: 25%;
  height: 5rem;
  border: 1px solid #eef1f7;
}

.whatday {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100vw;
  height: 3rem;
  margin-top: 2rem;
  border: 1px solid #eef1f7;
}

.baohan {
  margin-left: 5px;
  font-weight: 600;
}

/* .qiandao .ga:nth-child(1) {
    background-color: #ffebe2;
} */

.peiqi {
  filter: grayscale(100);
  background-color: #fbb436;
}

.big {
  /* margin-top: 3rem;
    position: absolute; */
  left: 0;
  bottom: 9rem;
  /* position: static; */
}
::v-deep .van-badge--top-right {
  top: -4px;
  right: -2px;
  position: absolute;
  scale: 0.8;
}
</style>